<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <h1>{{name}}</h1>
        <p>x={{user.x}}</p>
        <button @click="add">修改30</button>
        <button @click="fun">添加y</button>
        <button class="guazai">手动挂载</button>
        <button class="destroy">手动卸载</button>
    </div>

    <script>
        /* 自己触发的函数：钩子函数
          1.创建一个vue实例，创建之前(beforeCreate)，创建完成(created) 执行一次
          2.挂载到挂载点，   挂载之前(beforeMount)，挂载完成(mounted)  执行一次
          3.数据变了，更新期 更新之前(beforeUpdate),更新完成(updated)   很多次
          4.卸载期          卸载之前(beforeDestroy)  卸载完成destroyed 执行一次
        */
        let vm = new Vue({
            //挂载点
            el: "#app",
            //数据
            data: {
                name: "baby",
                user:{
                    x:20
                }
            },
            //方法
            methods: {
                add(){
                    this.user.x = ++this.user.x;
                },
                fun(){
                    this.user.y = 30;
                    console.log(this.user);
                }
            },
            //创建之前 : 所有的都是undefined
            beforeCreate() {
                console.group("创建之前");
                console.log("data", this.$data);
                console.log("name", this.name);
                console.log("el", this.$el);
                console.groupEnd();
            },
            //创建完成：vue实例的数据初始化完成了，但是el还是undefined，最早可以发ajax请求的地方
            created() {
                console.group("创建完成");
                console.log("data", this.$data);
                console.log("name", this.name);
                console.log("el", this.$el);
                console.groupEnd();
            },
            //当有el选项或者触发了$mount()   才会执行挂载期
            //挂载之前：找到了挂载点，但是{{}} 
            beforeMount() {
                console.group("挂载之前");
                console.log("data", this.$data);
                console.log("name", this.name);
                console.log("el", this.$el);
                console.groupEnd();
            },
            //挂载完成：数据解析完成，页面渲染好了
            //ajax，DOM节点操作，给window|document添加事件,打开定时器
            mounted() {
                console.group("挂载完成");
                console.log("data", this.$data);
                console.log("name", this.name);
                console.log("el", this.$el);
                console.groupEnd();

                window.onscroll = function(){
                    console.log("fsd");
                }
            },
            //更新之前(beforeUpdate) :页面重新渲染之前，取到的值就是新值
            beforeUpdate(){
                console.group("更新之前");
                console.log("data", this.$data);
                console.log("name", this.name);
                console.log("el", this.$el);
                console.groupEnd();
            },
            //更新完成(updated):页面重新渲染完成，取到的值就是新值
            updated(){
                console.group("更新完成");
                console.log("data", this.$data);
                console.log("name", this.name);
                console.log("el", this.$el);
                console.groupEnd();
            },
            //卸载之前(beforeDestroy)  
            //善后工作：取消window|document的事件，清除定时器
            beforeDestroy(){
                console.group("卸载之前");
                console.log("data", this.$data);
                console.log("name", this.name);
                console.log("el", this.$el);
                console.groupEnd();
                window.onscroll = null;
            },
            //卸载完成destroyed
            //DOM处于卸载前的最后一个状态，vue不在控制这个节点
            destroyed(){
                console.group("卸载完成");
                console.log("data", this.$data);
                console.log("name", this.name);
                console.log("el", this.$el);
                console.groupEnd();
            }
        })

        document.querySelector(".guazai").onclick = function(){
            //vue.$mount("#app")
            vm.$mount("#app");
        }
        document.querySelector(".destroy").onclick = function(){
            //vue.$destroy()
            vm.$destroy();
        }
    </script>
</body>

</html>